<template>
	<van-list
		:finished-text="$t('widget.md.finishedtext', '没有更多了')"
		:class="classNames"
		:finished="finished"
		:immediate-check="false"
		:offset="offset"
		@load="onLoad"
	>
		<template v-for="item in data">
			<template v-if="listMode == 'picker'">
				<AppMDCtrlPickerItem
					:item="item"
					:listMode="listMode"
					:rightActions="rightActions"
					:leftActions="leftActions"
					:key="item.srfkey"
					:singleSelect="singleSelect"
					:class="getMdAppMDCtrlItemClassNames(item)"
					:isSelect="getSelected(item)"
					@item-click="handleClick(item, $event)"
					@item-action-click="
						(logic, $event) => {
							handItemActionClick(item, logic, $event);
						}
					"
				>
					<template v-if="hasSlot('default')" #default>
						<slot name="default" :item="item"></slot>
					</template>
				</AppMDCtrlPickerItem>
			</template>
			<template v-else-if="listMode == 'exp'">
				<AppMDCtrlExpItem
					:item="item"
					:listMode="listMode"
					:rightActions="rightActions"
					:leftActions="leftActions"
					:key="item.srfkey"
					:class="getMdAppMDCtrlItemClassNames(item)"
					:isSelect="getSelected(item)"
					@item-click="handleClick(item, $event)"
					@item-action-click="
						(logic, $event) => {
							handItemActionClick(item, logic, $event);
						}
					"
				>
					<template v-if="hasSlot('default')" #default>
						<slot name="default" :item="item"></slot>
					</template>
				</AppMDCtrlExpItem>
			</template>
			<template v-else>
				<AppMDCtrlItem
					:item="item"
					:listMode="listMode"
					:rightActions="rightActions"
					:leftActions="leftActions"
					:key="item.srfkey"
					:class="getMdAppMDCtrlItemClassNames(item)"
					:isSelect="getSelected(item)"
					@item-click="handleClick(item, $event)"
					@item-action-click="
						(logic, $event) => {
							handItemActionClick(item, logic, $event);
						}
					"
				>
					<template v-if="hasSlot('default')" #default>
						<slot name="default" :item="item"></slot>
					</template>
				</AppMDCtrlItem>
			</template>
		</template>
	</van-list>
</template>
<script setup lang="ts">
import { MDCtrlProps } from './md-ctrl';
import AppMDCtrlItem from './components/md-ctrl-item.vue';
import AppMDCtrlExpItem from './components/md-ctrl-exp-item.vue';
import AppMDCtrlPickerItem from './components/md-ctrl-picker-item.vue';
import { IEvent, IParam } from '@/core';
import { Ref } from 'vue';
const props = defineProps(MDCtrlProps);
const emit = defineEmits<{
	(name: 'selectionChange', selections: IParam[]): void;
	(name: 'itemClick', item: any, event: MouseEvent): void;
	(name: 'itemDbClick', item: any, event: MouseEvent): void;
	(name: 'itemActionClick', event: IEvent<string>): void;
	(name: 'loadMore'): void;
	(name: 'refresh'): void;
}>();
const data: Ref<any[]> = ref([]);
const finished = computed(() => {
	return data.value.length >= props.totalRecord;
});
watch(
	() => props.items,
	() => {
		data.value.length = 0;
		props.items.forEach((item: IParam) => {
			data.value.push(item as any);
		});
	},
	{ immediate: true, deep: true }
);
const classNames = computed(() => {
	return {
		'app-control-list__empty': props.items.length === 0,
		'app-control-list__pagination': props.loadMore,
		[`app-control-list__${props.listMode}`]: true,
	};
});
//  获取列表项类名
const getMdAppMDCtrlItemClassNames = (item: any) => {
	return {
		'app-mdctrl-item': true,
		'app-mdctrl-group-item': item.isGroupItem,
		'app-mdctrl-item--selected': getSelected(item),
	};
};
const getSelected = (item: any): boolean => {
	return (
		props.selections.findIndex((s: IParam) => s.srfkey === item.srfkey) !== -1
	);
};

const handleClick = (item: any, event: MouseEvent) => {
	emit('itemClick', item, event);
};

const handItemActionClick = (item: any, logic: any, $event: any) => {
	emit('itemActionClick', {
		name: props.name,
		action: 'itemActionClick',
		data: { item: item, logic: logic, $event: $event },
	});
};

const onLoad = () => {
	emit('loadMore');
};

//  是否有该插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};
</script>
